<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('后台首页')"/>
    <style>
        .title {
            text-align: center;
            font-size: 50px;
            height: 200px;
            line-height: 200px
        }
    </style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12 title">统计信息</div>
    </div>
    <!--    消息-->
    <div class="row">
        <div class="col-sm-4">
            <div class="ibox">
                <div class="ibox-content" id="msgReceive-today">
                    <h5>今日消息成功率</h5>
                    <h2></h2>
                    <div class="progress progress-mini">
                        <div style="width: 0%;" class="progress-bar"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="ibox">
                <div class="ibox-content" id="msgReceive-week">
                    <h5>本周消息成功率</h5>
                    <h2></h2>
                    <div class="progress progress-mini">
                        <div style="width: 0%;" class="progress-bar"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="ibox">
                <div class="ibox-content" id="msgReceive-month">
                    <h5>本月消息成功率</h5>
                    <h2></h2>
                    <div class="progress progress-mini">
                        <div style="width: 0%;" class="progress-bar"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--    驻留-->
    <div class="row">
        <div class="col-sm-4">
            <div class="ibox">
                <div class="ibox-content">
                    <h5>今日驻留统计</h5>
                    <h2>[[${today?.msgStayIn}]]/[[${today?.msgStay}]]</h2>
                    <div class="text-center">
                        <div id="msgStay-today"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="ibox">
                <div class="ibox-content">
                    <h5>本周驻留统计</h5>
                    <h2>[[${week?.msgStayIn}]]/[[${week?.msgStay}]]</h2>
                    <div class="text-center">
                        <div id="msgStay-week"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="ibox">
                <div class="ibox-content">
                    <h5>本月驻留统计</h5>
                    <h2>[[${month?.msgStayIn}]]/[[${month?.msgStay}]]</h2>
                    <div class="text-center">
                        <div id="msgStay-month"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--    偏差-->
    <div class="row">
        <div class="col-sm-4">
            <div class="ibox">
                <div class="ibox-content">
                    <h5>今日偏差</h5>
                    <h1 class="no-margins">[[${deviation.today == null ? "-" : (deviation.today + "m")}]]</h1>
                    <div class="stat-percent font-bold text-navy"><i class="fa fa-bolt"></i></div>
                    <small>平均</small>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="ibox">
                <div class="ibox-content">
                    <h5>本周偏差</h5>
                    <h1 class="no-margins">[[${deviation.week == null ? "-" : (deviation.week + "m")}]]</h1>
                    <div class="stat-percent font-bold text-navy"><i class="fa fa-bolt"></i></div>
                    <small>平均</small>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="ibox">
                <div class="ibox-content">
                    <h5>本月偏差</h5>
                    <h1 class="no-margins">[[${deviation.month == null ? "-" : (deviation.month + "m")}]]</h1>
                    <div class="stat-percent font-bold text-navy"><i class="fa fa-bolt"></i></div>
                    <small>平均</small>
                </div>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: peity-js"/>
<th:block th:include="include :: sparkline-js"/>
<script th:inline="javascript">
    window.today = [[${today}]]
    window.week = [[${week}]]
    window.month = [[${month}]]

    const threshold = .6;

    function getReceivedRate(data) {
        if ($.common.isEmpty(data) || data.msgAll === 0) return "-"
        return Math.round(data.msgReceived / data.msgAll * 100)
    }

    $(document).ready(function () {

        let colorGreen = '#1ab394'
        let colorRed = '#ed5565'
        let color = {}

        let keys = ['today', 'week', 'month'];
        for (let key of keys) {
            // 消息
            try {
                let rate = getReceivedRate(window[key])
                let divId = "#msgReceive-" + key
                $(divId + " h2").html(rate + "%")
                color[key] = colorGreen;
                if (rate !== '-') {
                    $(divId + " .progress-bar").css("width", rate + "%")
                    $(divId + " .progress-bar").attr('title', window[key].msgReceived)
                    $(divId + " .progress-bar").css('background-color', rate / 100 > threshold ? colorGreen : colorRed)
                    $(divId + " .progress").attr('title', window[key].msgAll)
                }
            } catch (e) {
                console.error(e)
            }

            // 驻留
            let stayIn = 0, stayOut = 0, pieColor = colorGreen
            if (!$.common.isEmpty(window[key])) {
                stayIn = window[key].msgStayIn
                stayOut = window[key].msgStay - window[key].msgStayIn

                try {
                    pieColor = window[key].msgStayIn / window[key].msgStay > threshold ? colorGreen : colorRed
                } catch (e) {
                    console.error(e)
                }
            }

            $("#msgStay-" + key).sparkline([stayIn, stayOut], {
                type: 'pie',
                height: '140',
                sliceColors: [pieColor, '#F5F5F5']
            });
        }

    })
</script>
</body>
</html>